<template>
  <!-- 代理返佣 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="快捷聊天信息" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="giftForm" :model="formParams" :rules="giftForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <!-- 代理名称 -->
            <el-form-item class="item-clear" v-show="item.key=='a_name'" label="" prop="a_name">
              <el-input v-model="formParams.a_name" clearable placeholder="请输入代理名称"/>
            </el-form-item>
            <!-- 代理等级 -->
            <el-form-item class="item-clear" v-show="item.key=='a_level'" label="" prop="a_level">
              <el-input-number :min="0" :precision="0" v-model="formParams.a_level" controls-position="right" clearable placeholder="请输入代理等级"/>
            </el-form-item>
            <!-- 返佣货币 -->
            <el-form-item class="item-clear" v-show="item.key=='a_item'" label="" prop="a_item">
              <el-select class="width300" v-model="formParams.a_item" placeholder="请选择多语言" filterable>
                <el-option :label="'【'+ second.value+ '】' + second.label" :value="second.value" v-for="(second, two) in propDataArray" :key="two" style="width: 400px;"></el-option>
              </el-select>
            </el-form-item>
            <!-- A级代理返佣 -->
            <el-form-item class="item-clear" v-show="item.key=='a_firstgent'" label="" prop="a_firstgent">
              <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.a_firstgent" controls-position="right" clearable placeholder="请输入A级代理返佣比例"/>
            </el-form-item>
            <!-- B级代理返佣 -->
            <el-form-item class="item-clear" v-show="item.key=='a_secondgent'" label="" prop="a_secondgent">
              <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.a_secondgent" controls-position="right" clearable placeholder="请输入B级代理返佣比例"/>
            </el-form-item>
            <!-- C级代理返佣 -->
            <el-form-item class="item-clear" v-show="item.key=='a_thirdgent'" label="" prop="a_thirdgent">
              <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.a_thirdgent" controls-position="right" clearable placeholder="请输入C级代理返佣比例"/>
            </el-form-item>
            <!-- D级代理返佣 -->
            <el-form-item class="item-clear" v-show="item.key=='a_fourthgent'" label="" prop="a_fourthgent">
              <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.a_fourthgent" controls-position="right" clearable placeholder="请输入D级代理返佣比例"/>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('giftForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addRebate,
  editRebate
} from '@/api/game'
import {
  GAME_TYPE
} from '@/utils/enum'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    gameType: {
      type: Number,
      default: 1
    },
    propDataArray: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      GAME_TYPE,
      isShow: false,
      itemData:[
        { label: '代理名称', key: 'a_name' ,pass:true},
        { label: '代理等级', key: 'a_level' ,pass:true},
        { label: '返佣货币', key: 'a_item' },
        { label: 'A级代理返佣', key: 'a_firstgent' },
        { label: 'B级代理返佣', key: 'a_secondgent' },
        { label: 'C级代理返佣', key: 'a_thirdgent' },
        { label: 'D级代理返佣', key: 'a_fourthgent' },
      ],
      formParams: {
        a_name:'',
        a_level: 0,
        a_item: 2,
        a_firstgent: 0,
        a_secondgent: 0,
        a_thirdgent: 0,
        a_fourthgent: 0,
      },
      giftForm: {
        a_name: [{ required: true, trigger: 'blur', message: '请输入代理名称', }],
        a_level: [{ required: true, trigger: 'blur', message: '请输入代理等级', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          a_name:'',
          a_level: 0,
          a_item: 2,
          a_firstgent: 0,
          a_secondgent: 0,
          a_thirdgent: 0,
          a_fourthgent: 0,
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            addRebate(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editRebate(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss"></style>
